﻿@model MvcCmsProjectTracker.ViewModels.BugCreateViewModel
@section HtmlHead{
<link href="@Url.Content("/content/ckeditor.css") rel="stylesheet" type="text/css" />
}
<h2>New Bug</h2>
<div style="position:relative;">
<form id="form1" action="" method="post">
    <hr />
    <div id="actionbuttons" style="width: 800px; text-align: right;">
        <p>
            <button onclick="SubmitForm();">Create</button>
            @Html.ActionLink("Cancel", "Index", new { projectid = Model.Bug.ProjectID }, new { @class = "button" })
        </p>
    </div>
    @Html.Hidden("ProjectID", Model.Bug.ProjectID) 
    <div class="editor-label" style="float: left; width: 150px">
        @Html.LabelFor(model => model.Bug.Title):
    </div>
    <div class="editor-field" style="float: left;">
        @Html.TextBox("Title", "", new { style = "width:650px" })
    </div>
    <div class="clear">
    </div>
    <div class="editor-label" style="float: left; width: 150px">
        @Html.LabelFor(model => model.Bug.CategoryID):
    </div>
    <div class="editor-field" style="float: left;">
        @Html.DropDownList("CategoryID", new SelectList(Model.ProjectCategories, "CategoryID", "Name", Model.Bug.CategoryID), new { style = "width:200px" })
    </div>
    <div class="clear">
    </div>
    <div class="editor-label" style="float: left; width: 150px">
        @Html.LabelFor(model => model.Bug.LastUpdate):
    </div>
    <div class="editor-field" style="float: left;">
        @String.Format("{0:g}", Model.Bug.LastUpdate)
    </div>
    <div class="clear">
    </div>
    <hr />
    <div style="float: left; width: 430px">
        <div class="editor-label" style="float: left; width: 150px">
            @Html.Label("Assigned To"):
        </div>
        <div class="editor-field" style="float: left;">
            @Html.DropDownList("AssignedUserID", new SelectList(Model.ProjectMembers, "User.UserID", "User.UserName", Model.Bug.AssignedTo.UserID), new { style = "width:200px" })
        </div>
        <div class="clear">
        </div>
        <div class="editor-label" style="float: left; width: 150px">
            @Html.LabelFor(model => model.Bug.CreatorUserName):
        </div>
        <div class="editor-field" style="float: left;">
            @User.Identity.Name
        </div>
        <div class="clear">
        </div>
        <div class="editor-label" style="float: left; width: 150px">
            @Html.LabelFor(model => model.Bug.DateCreated):
        </div>
        <div class="editor-field" style="float: left;">
            @String.Format("{0:g}", Model.Bug.DateCreated)
        </div>
        <div class="clear">
        </div>
        <div class="editor-label" style="float: left; width: 150px">
            Project:
        </div>
        <div class="editor-field" style="float: left;">
            @Model.ProjectName
        </div>
        <div class="clear">
        </div>
    </div>
    <div style="float: left">
        <div class="editor-label" style="float: left; width: 150px">
            @Html.LabelFor(model => model.Bug.StatusID):
        </div>
        <div class="editor-field" style="float: left;">
            @Html.DropDownList("StatusID", new SelectList(Model.ProjectStatuses, "StatusID", "Name", Model.Bug.StatusID), new { style = "width:200px" })
            @if (Model.Bug.StatusID != null)
            { 
                <img id="statusurl" src="@Url.Content(Model.ProjectStatuses.SingleOrDefault(s => s.StatusID == Model.Bug.StatusID).ImageUrl)" alt="" />
            }
        </div>
        <div class="clear">
        </div>
        <div class="editor-label" style="float: left; width: 150px">
            @Html.LabelFor(model => model.Bug.PriorityID):
        </div>
        <div class="editor-field" style="float: left;">
            @Html.DropDownList("PriorityID", new SelectList(Model.ProjectPriorities, "PriorityID", "Name", Model.Bug.PriorityID), new { style = "width:200px" })
            @if (Model.Bug.PriorityID != null)
            { 
                <img id="priorityurl" src="@Url.Content(Model.ProjectPriorities.SingleOrDefault(p => p.PriorityID == Model.Bug.PriorityID).ImageUrl)" alt="" />
            }
        </div>
        <div class="clear">
        </div>
        <div class="editor-label" style="float: left; width: 150px">
            @Html.LabelFor(model => model.Bug.MilestoneID):
        </div>
        <div class="editor-field" style="float: left;">
            @Html.DropDownList("MilestoneID", new SelectList(Model.ProjectMilestones, "MilestoneID", "Name", Model.Bug.MilestoneID), new { style = "width:200px" })
            @if (Model.Bug.MilestoneID != null)
            { 
                <img id="milestoneurl" src="@Url.Content(Model.ProjectMilestones.SingleOrDefault(m => m.MilestoneID == Model.Bug.MilestoneID).ImageUrl)" alt="" />
            }
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="clear">
    </div>
    <br />    
    @Html.TextArea("Description", "")
    <br />   
</form>  
</div> 
@section ScriptContent{
    <script src="@Url.Content("/scripts/MvcCmsImageManager.js")" type="text/javascript"></script>
    <script src="@Url.Content("/scripts/ckeditor/ckeditor.js")" type="text/javascript"></script>
    <script src="@Url.Content("/scripts/ckeditor.js")" type="text/javascript"></script>
    <script src="@Url.Content("/areas/mvccmsprojecttracker/Scripts/jquery.validate.js")" type="text/javascript"></script>   
    <script id="Validation" type="text/javascript">
        $("#form1").validate({
            rules: {
                Title: { required: true }
            },
            messages: {
                Title: "A Bug Title Is Required"
            },
            errorElement: "div",
            wrapper: "div",  // a wrapper around the error message
            errorPlacement: function (error, element) {
                offset = element.offset();
                error.insertAfter(element)
                error.addClass('message');
                error.css('position', 'absolute');
                error.css('width', 190);
                error.css('left', 802);
                error.css('top', 0);
                var elementName = $(element).attr("name");
                switch (elementName) {
                    case "Title":
                        error.css('top', 60);
                        break;
                }
            }
        });
    </script>
    <script id="DocumentReady" type="text/javascript">
        $(document).ready(function () {
            ChangeEnter();
        });        
    </script>
    <script id="InitEditor" type="text/javascript">
        var editor;
        function ChangeEnter() {                
            if (editor) { editor.destroy(true); }
            editor = CKEDITOR.replace('Description',
		    {
		        enterMode: Number(1),
		        shiftEnterMode: Number(2),
		        height: "430"
		    });
		    MvcCmsImages.SetupCKEditor(editor);
		}
		function SubmitForm() {
		    $("#Description").val(editor.getData());		    
		    $("#form1").submit();
		}
    </script>
    <script type="text/javascript">
         $('#Bug_MilestoneID').change(function () {
            var url = '/Project/GetMilestoneURL/' + $("#Bug_MilestoneID").val();
            $.ajax({
                type: 'POST',
                url: url,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    $('#milestoneurl').attr("src", response);
                }
            });
        });

        $('#Bug_PriorityID').change(function () {
            var url = '/Project/GetPriorityURL/' + $("#Bug_PriorityID").val();
            $.ajax({
                type: 'POST',
                url: url,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    $('#priorityurl').attr("src", response);
                }
            });
        });

        $('#Bug_StatusID').change(function () {
            var url = '/Project/GetStatusURL/' + $("#Bug_StatusID").val();
            $.ajax({
                type: 'POST',
                url: url,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    $('#statusurl').attr("src", response);
                }
            });
        });
    </script>
}
